<template>
    <div class="newsInfo-contaner">
        <h2 class="title">{{newsInfo.title}}</h2>
        <p class="subTitle">
            <span>发表时间:{{newsInfo.add_time}}</span>
            <span>点击次数:{{newsInfo.click}}次</span>
        </p>
        <hr>

        <div class="newsContent" v-html="newsInfo.content">

        </div>
        <comment-box :id="this.id"></comment-box>
    </div>
</template>

<script>
import comment from '../subcomponents/comment.vue'
export default {
    data(){
        return {
            id:this.$route.params.id,
            newsInfo:{}
        }
    },
    created(){
        this.getNewsInfo()
    },
    methods:{
        getNewsInfo(){
            this.$http.get('/json/newsInfo/'+this.id+'.txt').then(result=>{
                var newsData=JSON.parse(result.bodyText)
                if(newsData.status==0)
                {
                    this.newsInfo=newsData.message[0]
                }
            },function(){
                console.log("失败")
            })
        }
    },
    components:{
        "comment-box":comment
    }
}
</script>

<style  scoped>
.newsInfo-contaner{
    padding: 0 4px;
}
.newsInfo-contaner .title{
     font-size: 16px;
     color: red;
     margin: 15px 0;
     text-align: center;
}
.newsInfo-contaner .subTitle{
    display: flex;
    justify-content: space-between;
}
.newsInfo-contaner .subTitle span{
    color: royalblue;
}
</style>